<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">关于我们</block>
			<block slot="right">
				<text class="lg text-white cuIcon-appreciate" @tap="btnMore"></text>
			</block>
		</cu-custom>
		
		<view class="cu-bar search bg-white fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view>

		<scroll-view scroll-y class="indexes" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
		:scroll-with-animation="true" :enable-back-to-top="true" @scrolltoupper="upper" @scrolltolower="lower">
			<view class="cu-bar btn-group" v-for="(item,index) in list" :key="index">
				<button class="cu-btn bg-red shadow-blur round lg">保存{{index}}</button>
			</view>
			<view class="cu-load bg-white" :class="isLoad?'loading':'over'"></view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				InputBottom: 0,
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				list:new Array(20),
				isLoad:true,
			};
		},
		methods:{
			btnMore(){
				console.log(123);
				uni.showModal({
					title: '提示',
					content: '这是一个模态弹窗',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			upper: function(e) {
				uni.showModal({
					title: '提示',
					content: '这是一个模态弹窗',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				console.log('触发顶部')
			},
			lower: function(e) {
				console.log('触发底部')
					
				if(this.list.length<50){
					this.list = this.list.concat(new Array(10))
				}else{
					this.isLoad = false;
				}
				
			},
			
		},
		onLoad() {
			console.log(this.CustomBar);
		}
	}
</script>

<style>
	page {
		padding-top: 100upx;
	}
	.lg{
		font-size: 40upx;
		padding: 0 40upx;
	}
</style>
